<template>
  <div>
    <el-container>
      <el-main style="margin-right: -40px">
        <el-card class="evaluate" style=" margin-left: 10px; margin-right: 80px; padding-top: 0px; margin-bottom: 0px">

          <el-form ref="form" :model="form" :rules="rules" label-width="125px" >
            <el-form-item class="title" label="指标内容：">
              <div style="font-size: 20px; margin-top: -10px">{{evaluate.label}}</div>
            </el-form-item>
            <el-divider></el-divider>
            <el-form-item label="符合要求" prop="submitcontent.complete" >
              <el-radio-group v-model="form.submitcontent.complete">
                <el-radio label="是" ></el-radio>
                <el-radio label="否" ></el-radio>
              </el-radio-group>
            </el-form-item>
            <!--      <el-form-item label="完成情况" v-show="evaluate.evaluatevaluetype==2">-->
            <!--        <el-checkbox-group v-model="form.submitcontent.progress">-->
            <!--          <el-checkbox label="0%"></el-checkbox>-->
            <!--          <el-checkbox label="50%"></el-checkbox>-->
            <!--          <el-checkbox label="100%"></el-checkbox>-->
            <!--        </el-checkbox-group>-->
            <!--      </el-form-item>-->
            <el-form-item label="补充描述" style="width: 500px;" prop="submitcontent.desc">
              <el-input type="textarea"
                        v-model="form.submitcontent.desc"
                        placeholder="请输入描述内容"
                        :rows='8'
                        maxlength="800"
                        show-word-limit
                        style="width: 900px"
              ></el-input>
            </el-form-item>

            <el-form-item label="上传资料" >
              <el-upload
                  class="upload-demo"
                  action="#"
                  multiple
                  ref="upload"
                  :limit="5"
                  :on-exceed="handleExceed"
                  :auto-upload="false"
                  :on-preview="handlePreview"
                  :on-change="handleChange"
              >
                <!--            :on-remove="handleRemove"-->
                <!--            :before-remove="beforeRemove"-->
                <!--            multiple-->
                <!--            :limit="3"-->
                <!--            :on-exceed="handleExceed"-->
                <!--            :file-list="fileList"-->

                <el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">
                  <el-progress v-if="progressFlag" :percentage="progress" style="width: 40%"></el-progress>
                  可上传pdf、word、jpg/png文件，且不超过50Mb
                </div>
              </el-upload>
            </el-form-item>
            <el-form-item style="margin-top: -10px; margin-bottom: -5px">
              <el-button type="primary" @click="onSubmit('form')" icon="el-icon-upload2">保存提交</el-button>
              <el-button @click="resetForm('form')">取消</el-button>
            </el-form-item>
          </el-form>
        </el-card>

        <el-card v-if="this.expertform.adv" style=" margin-left: 10px; margin-right: 80px; margin-top: 10px">
          <div class="expert" style="font-size: 20px; margin-bottom:20px">专家评审</div>
          <el-divider></el-divider>
          <el-form ref="expertform" :model="expertform" :rules="expertrules" label-width="120px" disabled>
            <el-form-item label="评估内容" style="width: 500px; margin-top: 20px; " prop="adv">
              <el-input type="textarea"
                        v-model="expertform.adv"
                        placeholder="暂无评审意见"
                        :rows='8'
                        maxlength="800"
                        show-word-limit
                        style="width: 900px"
              ></el-input>
            </el-form-item>
<!--            <el-form-item>-->
<!--              <el-button type="primary" @click="" icon="el-icon-upload2">提交点评</el-button>-->
<!--              <el-button @click="">取消</el-button>-->
<!--            </el-form-item>-->
          </el-form>
        </el-card>
      </el-main>

      <el-aside width="30%" style="margin-left: -20px">
        <el-card class="box-card" style="margin-right:50px">
          <div slot="header" class="clearfix">
            <span style="font-size: 18px">已上传文件</span>
          </div>
          <div v-for="file in this.uploadedfiles" :key="file.submitfilepath" class="text item" style="margin-bottom: 10px">
            <el-link type="primary" :href="file.submitfilememo">{{'●' + file.submitfilename }}</el-link>
          </div>
        </el-card>
      </el-aside>
    </el-container>



  </div>
</template>

<script>
export default {
  data() {
    return {
      fileList: [],
      uploadedfiles:[],
      evaluate: null,
      progress: 0,
      progressFlag:false,
      expertform:{
        adv:''
      },
      form: {
        evaluateindex3id: null,
        schoolname: null,
        evaluatetaskid: null,
        submitcontent:{
          complete:'',
          progress:[],
          desc: '',
        }
      },
      rules:{
        'submitcontent.complete': [
            {required:true, message:"必选项！", trigger:'change'}
        ],
        'submitcontent.desc':[{required:true, message:'请输入内容！', trigger:'blur'}]
      },
      expertrules:{

      }

    }
  },
  computed:{

  },
  methods: {
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.$refs.upload.clearFiles()
    },
    handleChange(file, fileList){
      this.fileList = fileList
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    // filesUploadSuccess(res){
    //   if(res){
    //     this.$message.success("文件上传成功");
    //   }
    //   else{
    //     this.$message.success("文件上传失败");
    //   }
    // },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },


    // onSubmit(formName) {
    //   this.$refs[formName].validate((valid) => {
    //     if (valid) {
    //       console.log('submit!');
    //       this.progressFlag=true
    //       // console.log(this.form);
    //       this.form.submitcontent.filesnum = this.fileList.length
    //       let formData = new FormData()
    //       this.fileList.forEach(item=>{
    //         formData.append('files', item.raw)
    //       });
    //       formData.append('form', JSON.stringify(this.form))
    //       const _this = this
    //       axios({
    //         url: 'http://localhost:8081/files/upload',
    //         method: 'POST',
    //         data: formData,
    //         // eslint-disable-next-line eqeqeq
    //         onUploadProgress: (progressEvent) => {
    //           // eslint-disable-next-line
    //           let complete = (progressEvent.loaded / progressEvent.total * 100 | 0)
    //           // 这里为上传的进度
    //           _this.progress = complete;
    //         },
    //       }).then((res) => {
    //         // console.log('post返回值' + res)
    //         setTimeout(res=>{
    //           if (res='success') {
    //             this.$message({
    //               message:"提交上传成功",
    //               type:"success"
    //             })
    //           } else {
    //             this.$message.error("提交失败")
    //           }
    //         },500)
    //
    //       });
    //       // 子路由调用父路由（打星）
    //       this.$emit('father', this.evaluate.label)
    //     } else {
    //       console.log('error submit!!');
    //       return false;
    //     }
    //   });
    //
    // },
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log('submit!');
          this.progressFlag=true
          // console.log(this.form);
          this.form.submitcontent.filesnum = this.fileList.length
          let formData = new FormData()
          this.fileList.forEach(item=>{
            formData.append('files', item.raw)
          });
          formData.append('form', JSON.stringify(this.form))
          const _this = this
          axios({
            url: 'http://localhost:8081/files/upload',
            method: 'POST',
            data: formData,
            // eslint-disable-next-line eqeqeq
            onUploadProgress: (progressEvent) => {
              // eslint-disable-next-line
              let complete = (progressEvent.loaded / progressEvent.total * 100 | 0)
              // 这里为上传的进度
              _this.progress = complete;
            },
          }).then(async (res) => {
            const result = res.data
            console.log('post返回值' + result)

            if (result == 'success') {
              setTimeout(() => {
                this.$message({
                  message: "提交上传成功",
                  type: "success"
                })
              }, 500)
              // 子路由调用父路由
              await this.$emit('father', this.evaluate.label)
              this.getItem()
            } else {
              setTimeout(()=>{
                this.$message.error("提交失败")
              }, 500)
            }

          });

        } else {
          console.log('error submit!!');
          return false;
        }
      });

    },

    getItem(){
      // 获取传递过来的三级指标
      this.evaluate = JSON.parse(this.$route.query.item)
      this.form.schoolname = this.$route.query.schoolname
      this.form.evaluateindex3id = this.evaluate.evaluateindex3id
      // console.log("evaluate",this.evaluate)
      axios.get('http://localhost:8081/getRightTaskId/'+this.form.schoolname).then((res)=>{
        this.form.evaluatetaskid =res.data
        // 查询提交内容
        if (this.evaluate.success){
          axios.get(`http://localhost:8081/submit/search/${this.$store.state.schoolname}/${this.form.evaluatetaskid}/${this.evaluate.evaluateindex3id}`).then(res=>{
            let content = JSON.parse(res.data.submitcontent)
            this.form.submitcontent.complete = content.complete
            this.form.submitcontent.desc = content.desc
            this.form.submitcontent.filesnum = content.filesnum
            this.expertform.adv = content.advice // 专家意见
            // console.log('提交内容',res.data);
            // 拿着res.data.id 查表submitfiles
            axios.get(`http://localhost:8081/submit/searchfiles/${res.data.id}`).then(res=>{
              console.log('已上传文件',res.data);
              this.uploadedfiles = res.data
            })

          })
        }
        else{
          // 清空表单
          this.$nextTick(()=>{
            this.resetForm('form')
            this.$refs.upload.clearFiles()
            this.progressFlag=false
            this.progress=0
            this.uploadedfiles=[]
          })
        }
      })


    }
  },
  async created() {
    this.getItem()
  },
  destroyed() {

  },

  watch: {
    // 如果路由有变化，会再次执行该方法
    $route: "getItem"
  }


}
</script>

<style scoped>
.el-main{
  padding: 0px;
}
.el-main, .el-aside{

}
.title >>>label{
  font-size: 20px;
  color: black;
  margin-top: -10px;
}
.el-divider--horizontal {
  margin-top: -10px;
  margin-bottom: 5px;
}
.evaluate /deep/{
  padding-bottom: 0px;
}
.expert /deep/{

}
</style>
